import React, {lazy, Fragment} from "react";
import {withRouter} from "react-router";
import {observer, inject} from "mobx-react";

import HeaderBar from "@/components/headerBar";
import BreadcrumdBar from "@/components/breadcrumd";
import SiderBar from "@/components/siderBar";
import {Layout} from "antd";

const {Content} = Layout;
const HeaderBarWithRouter = withRouter(HeaderBar);
const SiderBarWithRouter = withRouter(SiderBar);

const Home = withRouter(lazy(() => import(/* webpackChunkName: "home" */ "@/pages/home")));
const About = withRouter(lazy(() => import(/* webpackChunkName: "about" */ "@/pages/about")));
const Case = withRouter(lazy(() => import(/* webpackChunkName: "case" */ "@/pages/case")));
const Pie = withRouter(lazy(() => import(/* webpackChunkName: "pie" */ "@/pages/pie")));
const Line = withRouter(lazy(() => import(/* webpackChunkName: "line" */ "@/pages/line")));

export const Routers = [
  {
    path: "",
    component: Home
  },
  {
    path: "Home",
    component: Home
  },
  {
    path: "About",
    component: About
  },
  {
    path: "Case",
    component: Case
  },
  {
    path: "Pie",
    component: Pie
  },
  {
    path: "Line",
    component: Line
  }
];

export const PageWrap = inject("store")(
  observer(({store, children}) => (
    <Fragment>
      <HeaderBarWithRouter />
      <Layout>
        <SiderBarWithRouter />
        <Layout style={{padding: `0 20px 20px`}}>
          <BreadcrumdBar />
          <Content
            style={{
              background: "#fff",
              padding: 20,
              margin: 0,
              minHeight: 800
            }}
          >
            {children}
          </Content>
        </Layout>
      </Layout>
    </Fragment>
  ))
);
